<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
    <el-table-column label="操作" width="180">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="moveUp(scope.$index)"
          :disabled="scope.$index === 0"
          icon="el-icon-top"
          type="text"
        >
        </el-button>
        <el-button
          size="mini"
          @click="moveDown(scope.$index)"
          :disabled="scope.$index === tableData.length - 1"
          icon="el-icon-bottom"
        >
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: "张三", age: 28 },
        { id: 2, name: "李四", age: 32 },
        { id: 3, name: "王五", age: 24 },
        { id: 4, name: "赵六", age: 30 },
      ],
    };
  },
  methods: {
    moveUp(index) {
      if (index <= 0) return;
      const prev = this.tableData[index - 1];
      this.$set(this.tableData, index - 1, this.tableData[index]);
      this.$set(this.tableData, index, prev);
    },
    moveDown(index) {
      if (index >= this.tableData.length - 1) return;
      const next = this.tableData[index + 1];
      this.$set(this.tableData, index + 1, this.tableData[index]);
      this.$set(this.tableData, index, next);
    },
  },
};
</script>
